<template>
  <div>
      <Nav/>
       <!-- main开始   start -->
    <div class="main">
        <div class="w">
            <!-- 搜索记录  bared-->
            <div class="bared clearfix">
                <ul>
                    <li>
                        <a href="">全部结果</a>
                    </li>
                    <li v-if="list.categoryName">
                        <a href="">{{list.categoryName}}</a>
                        <span class="iconfont icon-chahao" @click="removeCarteGory"></span>
                    </li>
                    <li v-if="list.keyword">
                        <a href="">{{list.keyword}}</a>
                        <span class="iconfont icon-chahao" @click="removeKeyword"></span>
                    </li>
                    <li v-if="list.trademark">
                        <a href="">{{list.trademark.split(":")[1]}}</a>
                        <span class="iconfont icon-chahao" @click="removetrademark"></span>
                    </li>
                     <li v-for="(props,index) in list.props" :key="index">
                        <a href="">{{list.props[index].split(":")[1]}}</a>
                        <span class="iconfont icon-chahao" @click="removeprops(index)"></span>
                    </li>
                </ul>
            </div>

            <!-- 选择款式  selecor组件     
                把post返回的数据 trademarkList，attrsList  传给子组件 Selector-->
                <!-- 父子通信  把trademarkList   attrList数据传给子组件
                接收子组件定义的暗名gettradem   并且使用gettradem方法接收
                接收子组件定义的暗名getAttrs    并且使用getAttrs方法接收 -->
            <Selector 
              :trademarkList='trademarkList' 
              :attrsList="attrsList"
              @gettradem="gettradem"
              @getAttrs="getAttrs"
              />
        
            <!-- 产品图  details -->
            <div class="details ">
                <div class="sui-navbar">
                    <ul>
                        <li :class="{details_bg:Get_order}">
                            <a href.prevent="" @click="order(1)">综合</a>
                            <i :class="{
                                'iconfont':true,
                                'icon-xiajiantou':Order_down,
                                'icon-shangjiantou':Order_up
                              }" 
                              v-if="Get_order"></i>
                        </li>
                        <li :class="{details_bg:Get_toorder}">
                            <a href.prevent="" @click="order(2)">价格</a>
                            <i :class="{
                                'iconfont':true,
                                'icon-xiajiantou':Order_down,
                                'icon-shangjiantou':Order_up
                                }" 
                              v-if="Get_toorder"></i>
                        </li>
                    </ul>
                </div>
                <div class="goods-list ">
                    <ul class="clearfix">
                        <li v-for="goods in goodsList" :key="goods.id">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <a href.prevent="">
                                        <img :src="goods.defaultImg" alt="" height="215px" @click="Set_attr(goods.id)">
                                    </a>
                                </div>
                                <div class="price">
                                    <strong>¥ <i>{{goods.price}}</i>.00</strong>
                                </div>
                                <div class="attr">
                                    <a href="">
                                        {{goods.title}}
                                    </a>
                                </div>
                                <div class="commit">
                                    <span>已有<i>2000</i>人评价</span>
                                </div>
                                <div class="operate">
                                    <a href="" class="operate_left">加入购物车</a>
                                    <a href="">收藏</a>
                                </div>
                            </div>
                        </li>
                      
                    </ul>
                </div>
                <!-- <Pagination 
                  :pageNo='list.pageNo' 
                  :pageSize='list.pageSize' 
                  :total='Search_List.total' 
                  :continues='5' 
                  @Button_pagin='Button_pagin'
                  v-show="Search_List.total != 0"
                  /> -->
                    <el-pagination
                         background
                        layout="prev, pager, next,total"
                        :pager-count=7
                        :page-size='list.pageSize'
                        :total="Search_List.total"
                        :page-count='this.pageNum'
                        @current-change='currentchange'
                        :current-page.sync='list.pageNo'
                        >
                    </el-pagination>
            </div>
        </div>
    </div>
    <!-- main开始   end -->
  </div>
</template>

<script>
//引入selecor组件 
import Selector from './Selector.vue'

// 引入vuex中的mapGetters与mapState方法
import {mapGetters,mapState} from 'vuex'

export default {
    name:'Search',
    data() {
      return {
        // 定义一个变量  把所有需要传的参数都设置为""
        //undefined  如果参数为undefined  则不会发送给接口
        list:{
            category1Id:undefined,
            category2Id:undefined,
            category3Id:undefined ,
            categoryName: undefined,
            keyword:undefined,
            order: "1:desc",
            pageNo: 1,
            pageSize: 10,
            props: [],
            trademark:undefined
          },
      }
    },
    // 加载组件Selector
    components:{
      Selector
    },

    computed:{
      // 获取search 的vuex中 State数据
      ...mapState('search',['Search_List']),

      // 获取search 的vuex中  Getters数据
      ...mapGetters('search',['attrsList','goodsList','trademarkList']),

      //  如果点击的是order的第一个参数为1 则表示点的综合
      Get_order(){
        return this.list.order.split(":")[0] == 1
      },
      //  如果点击的是order的第一个参数为2  则表示点的价格   
      Get_toorder(){
        return this.list.order.split(":")[0] == 2
      },
      // 如果点击的是order的第二个参数为asc  则图标为向上
      Order_up(){
         return this.list.order.split(":")[1] == 'asc'
      },
      // 如果点击的是order的第二个参数为desc  则图标为向下
      Order_down(){
       return this.list.order.split(":")[1] == 'desc'
      },
        // 总页数
      pageNum(){
        // Math.ceil表示向上取整   总条数/每页展示多少条 = 有多少页（并且向上取整）
        return Math.ceil(this.Search_List.total/this.list.pageSize)
      },
    },
    beforeMount() {
        // 合并对象参数
        Object.assign(this.list,this.$route.query,this.$route.params);
        this.$store.dispatch('search/getlist',this.list)
    },
    watch:{
      // 监视search页面的路由变化    完整写法
      $route:{
        // immediate:true,     //默认一进入就执行下面语句
       async handler(){
            //如果$route.query与parmas的数据与 Serch中data的数据相同则赋值给 data中的数据
            // 如果this.list中属性 与 $route.query ， $route.params中属性一样  则会赋值给this.list中属性
            //Objcet.assign(表示浅拷贝  合并参数)
            Object.assign(this.list,this.$route.query,this.$route.params);
            //携带参数this.list发给接口(post)
            await  this.$store.dispatch('search/getlist',this.list)
            //如果把categoryId都设置undefined则会出现所有category1Id都有数据的情况（因为客户可能点击2 3次）
            //  undefined  可以把为undefined  不发送   如果为“”则会直接发送 ”“  这样影响性能
                this.list.category1Id = undefined
                this.list.category2Id=undefined
                this.list.category3Id = undefined
        }
      }
    },
    //Sercah页面  props接收数据   记得入  “ ” 符号     接收数据名 要和 路由设置的名 对应
    // props:['Serch_Text','test']    
    methods: {

      //如果点击了categoryName 【 x 】 按钮（ nav组件中top栏中数据的  categoryName）  则会删除
      removeCarteGory(){
      //   如果$route的params值存在则重新发送请求   没有则会把categoryName数据
        if(this.$route.params){
          this.$router.push({
            name:'search',
            params:this.$route.params
          })
        }
        //把 categoryName 设置为空    因为路由 改变了路径   则会执行路由改变的语句
        this.list.categoryName = undefined;
        this.list.category1Id = undefined
        this.list.category2Id=undefined
        this.list.category3Id = undefined
      },

      //删除 head 组件中搜索框数据 ( 在search组件中的params的  【 x 】 按钮 )
      removeKeyword(){
        // 如果query数据存在  则表示也点击了query数据    并且发送query数据
        if(this.$route.query){
          this.$bus.$emit("to_query",this.$route.query)
        }
        // 把params数据  设置为空    因为路由$route发生了改变 则会 调用watch 监视的$route语句 
        this.list.keyword = undefined;
        this.list.category1Id = undefined
        this.list.category2Id=undefined
        this.list.category3Id = undefined
      },

      //点击品牌属性时  把子组件传入的数据 给list数据     并且把list数据发送请求
      gettradem(value,id){
        this.list.trademark = id + ":" + value;
        this.$store.dispatch('search/getlist',this.list)
      },
    
      //删除 品牌属性的【 x 按钮】   把list的trademark数据设置为 undefined   并且重新发送数据
      removetrademark(){
        this.list.trademark = undefined,
        this.$store.dispatch('search/getlist',this.list)
      },

      // 点击产品属性 则会显示到全部结果页面
      // String.includes(包含的值)  判断string的值 是不是包含传入的值
      //   包含则返回trun 不包含则false
      getAttrs(attrs,value){
        let array = `${attrs.attrId}:${value}:${attrs.attrName}`
        // 如果不包含则在porps数组结尾添加点击的属性  并且发送数据
        if(!this.list.props.includes(array)){
        // 在数组结尾添加数据
          this.list.props.push(array);
        }
        //发送数据
        this.$store.dispatch('search/getlist',this.list)
      },

      //删除产品属性 的 【x 按钮】  并且重新发送数据
      removeprops(value){
      //删除点击的x的 该属性  并且重新发送数据    
      //Array.splice(index【表示当前点击props数据的索引】,删除几个)
        this.list.props.splice(value,1);
        this.$store.dispatch('search/getlist',this.list)
      },
      //商品的排序方式 
      order(index){
        // 分割order的 ：参数  并且返回一个数组  获取数组的第2个值
        let list_oreder = this.list.order.split(":")[1]
        // 如果点击的值（index）是否同一个 则运行下面语句    如果点击的是另一个  则为另一个的向下排序   并且发送请求
        if(index == this.list.order.split(":")[0]){
        // 如果oreder第二个值等于desc 则表示asc
        // 如果为asc  则为desc
          list_oreder == 'desc' ? this.list.order = `${index}:asc`: this.list.order = `${index}:desc`
        }else{
          this.list.order = `${index}:desc`
        }
        this.$store.dispatch('search/getlist',this.list)
      },

    //  分页器组件   获取当前分页器点击的索引  并且发送请求
    //   Button_pagin(pagNum){
    //         this.list.pageNo = pagNum
    //         this.$store.dispatch('search/getlist',this.list)
    //   },
     // 用户点击了那个产品 并且发送当前点击的数据 到下一个页面

    // 点击了图片 则进入下一个路由
      Set_attr(id){
          this.$router.push({
            name:'detail',
            params:{
              skuid:id
            }
          })
      },

    //   async nextclick(val){
    //       console.log(document.documentElement.scrollTop);
    //     //   document.documentElement.scrollTop=0
    //       this.list.pageNo = val
    //       await this.$store.dispatch('search/getlist',this.list)
    //   },
    //   async prevclick(val){
    //     //   document.documentElement.scrollTop=0
    //         this.list.pageNo = val
    //        await this.$store.dispatch('search/getlist',this.list)
    //   },
    // el-pagination 当前点击了分页器则会获取点击索引
      async currentchange(val){
          //把右边的滚动条设置为最上方
          document.documentElement.scrollTop=0
          this.list.pageNo = val
           await this.$store.dispatch('search/getlist',this.list)
      }
    },
}
</script>

<style scoped lang='less'>
.main{
    .bared{
        margin-top: 10px;
        ul{
            display: flex;
            li{
                height: 20px;
                line-height: 20px;
                border: 1px solid red;
                padding: 0px 10px;
                margin-right: 3px;
                background: #f7f7f7;
                border: 1px solid #dedede;
                span{
                    vertical-align: middle;
                    font-size: 17px;
                    cursor: pointer;
                }
            }
            &>li:first-child{
                padding: 0px 10px 0px 20px;
                border: 0;
                background: #fff;
            }
        }
    }
    .selector{
        border: 1px solid #ddd;
        margin-top: 20px;
        line-height: 35px;
        background: #f1f1f1;
        &>dl:first-child{
            border-top: 0;
        }
        dl{
            border-top: 1px solid #ddd;
            width: 100%;
            dt{
                text-align: right;
                box-sizing: border-box;
                padding-right: 10px;
                width: 100px;
                float: left;
                
            }
            dd{
                background: #fff;
                display: flex;
                a{
                    padding: 0 10px;
                }
                .logo{
                    a{
                        padding: 0px;
                    }
                    box-sizing: border-box;
                    width: 100%;
                    padding: 10px;
                    display: flex;
                    justify-content: space-between;
                    ul{
                        overflow: hidden;
                        width: 955px;
                        margin-left: 6px;
                        border: 1px solid #e4e4e4;;
                        border-top: 0;
                        border-right: 0;
                        display: flex;
                        flex-wrap: wrap;
                        li{
                            border-top: 1px solid #e4e4e4;
                            width: 105px;
                            height: 52px;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                            text-align: center;
                            line-height: 52px;
                            border-right: 1px solid #e4e4e4;;
                        }
                    }
                    .logo_a{
                        line-height: normal;
                        &>a:first-child{
                            background: #fff;
                            border: 1px solid #d5d5d5;
                            padding: 0 10px;
                            margin-right: 10px;
                            line-height: 18px;
                            vertical-align: middle;
                        }
                    }
                }
            }
        }
    }
    .details{
        margin-top: 5px;
        .sui-navbar{
            border: 1px solid #e2e2e2;
            box-shadow: 0 1px 4px rgb(0 0 0 / 7%);
            min-height: 40px;
            line-height: 40px;
            ul{
                display: flex;
                li{
                  display: flex;
                  cursor: pointer;
                    a{
                        padding: 0px 15px;
                        padding-right: 2px;
                        line-height: 40px;
                    }
                     i{
                           color: #fff;
                           font-size: 18px;
                        }
                }
                .details_bg{
                   background: #e1251b;
                   a{
                    color: #fff;
                   }
                }
            }
        }
        .goods-list{
            ul{ 
                display: flex;
                flex-wrap: wrap;
                li{
                    width: 20%;
                    margin-top: 15px;
                    .list-wrap{
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            height: 355px;
                        .p-img{
                            a{
                                img{
                                  // border: 1px solid red;
                                  width: 215px;
                                  height:215px;
                                  border: none;
                                }
                            }
                        }
                        .price{
                            padding-left: 5px;
                            margin-top: 10px;
                            strong{
                                font-size: 18px;
                                color: #c81623;
                            }
                        }
                        .attr{
                            padding-left: 5px;
                            width: 85%;
                            overflow: hidden;
                            margin-bottom: 8px;
                            min-height: 38px;
                            cursor: pointer;
                            line-height: 1.8;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                            a{
                                color: #333;
                            }
                            a:hover{
                                color: blue;
                            }
                        }
                        .commit{
                            padding-left: 5px;
                            height: 22px;
                            font-size: 13px;
                            color: #a7a7a7;
                            i{
                                font-weight: 700;
                                color: #646fb0;
                            }
                        }
                        .operate{
                            padding-left: 5px;
                            margin-top: 5px;
                            display: flex;
                            a{
                                margin-right: 17px;
                                min-width: 85px;
                                border: 1px solid #e1251b;
                                text-align: center;
                                padding: 2px 14px;
                                box-sizing: border-box;
                            }
                            &>a:first-child{
                                color: #e1251b;
                            }
                            &>a:first-child:hover{
                                background: #e1251b;
                                color: #fff;
                            }
                            &>a:last-child{
                                border: 1px solid #8c8c8c;
                                color: #8c8c8c;
                            }
                            &>a:last-child:hover{
                                background: #8c8c8c;
                                color: #fff;
                            }
                        }
                    }
                }
            }
        }
       
    }
    .hot-sale{
        margin-top: 20px;
        border: 1px solid #ddd;
        h4{
            font-weight: 700;
            font-size: 14px;
            line-height: 21px;
            border-bottom: 1px solid #ddd;
            background: #f1f1f1;
            color: #333;
            margin: 0;
            padding: 5px 0 5px 15px;
        }
        .hot-list{
            padding: 15px;
            ul{
                display: flex;
                justify-content: space-between;
                li{
                    width: 25%;
                    .hot_strong{
                        margin-top: 20px;
                        font-weight: 700;
                        font-size: 18px;
                        color: #c81623
                    }
                    .host_span{
                        height: 22px;
                        font-size: 13px;
                        color: #a7a7a7;
                    }

                }
            }
        }
    }
}
.el-pagination{
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
</style>